<template>
  <div class="van-submit-bar">
    <div class="van-submit-bar__bar" v-if="hasList">
      <!-- 培训列表-培训详情 -->
      <div class="van-checkbox">
        <span>培训费：￥{{ trainFee || 0 }}</span>
      </div>
      <div class="van-submit-bar__price van-submit-bar-baomin">
        <small>已报名 {{ entryNum || 0 }}</small>
        <p>剩余名额  {{ surplusNum || 0 }}</p>
      </div>
      <mt-button type="danger" v-if="enrollStatus==0" @click.native="handleButton">报名</mt-button>
      <mt-button type="primary" v-if="enrollStatus==1" disabled>已报名</mt-button>
      <mt-button type="primary" v-if="enrollStatus==2" disabled>已参与</mt-button>
      <mt-button type="default" v-if="enrollStatus==3" disabled style="background: #ddd;">已结束</mt-button>
    </div>
    <div class="van-submit-bar__bar" v-else>
      <!-- 我的培训-培训详情 -->
      <div class="van-submit-bar__price">
        <p>已缴纳培训费：￥{{ trainFee || 0 }}</p>
        <small>报名日期：{{ entryDate }}</small>
      </div>
      <mt-button class="lsc-train-button" v-if="trainStatus==0" style="height: 70%; color: red;" disabled type="default">未开始</mt-button>
      <mt-button class="lsc-train-button" v-if="trainStatus==1" style="height: 70%; color: #26a2ff;" disabled type="default">培训中</mt-button>
      <mt-button class="lsc-train-button" v-if="trainStatus==2" style="height: 70%;" disabled type="default">已结束</mt-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'trainButton',
  props: {
    trainFee: Number,
    entryNum: Number,
    entryDate: String,
    surplusNum: Number,
    hasList: Boolean,
    trainStatus: {
      type: Number,
      default: 0
    },
    enrollStatus: {
      type: Number,
      default: 0
    }

  },
  methods: {
    handleButton () {
      this.$emit('handle-button')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-submit-bar {
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 100;
  position: fixed;
  -webkit-user-select: none;
          user-select: none;
  border-top: 2px solid #f2f2f2;
}
.van-checkbox span {
  color: red;
}
.van-submit-bar__bar {
  padding-left: 8px;
  height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  background-color: #fff;
}

.van-submit-bar__price {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  text-align: center;
  color: #666;
}

.van-submit-bar__price.van-submit-bar-baomin {
  text-align: left;
  padding-left: 15px;
}
.van-submit-bar__price p {
  color: #26a2ff;
  font-weight: 600;
}
.van-submit-bar__price small {
  display: inline-block;
  color: #8f8d8d;
}
.van-submit-bar__price-interger {
  color: #f44;
}

.van-submit-bar__price-decimal {
  color: #f44;
  font-size: 12px;
}

.van-submit-bar .mint-button {
  width: 110px;
  height: 100%;
  border-radius: 0;
  font-size: 16px;
}

.van-submit-bar .van-button--disabled {
  border: none;
}
.lsc-train-button {
  border-left: 2px solid #ccc;
}
</style>
<style>

.mint-button--default {
  background-color: #FFF;
  -webkit-box-shadow: 0 0 1px #FFF;
  box-shadow: 0 0 1px #FFF;
}
.mint-button.is-disabled {
  opacity: 1;
}
</style>
